<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
  <title>w登录页面</title>
  <link rel="stylesheet" type="text/css" href="http://css.huangwx.cn/css/sweetalert.css">
  <script type="text/javascript" src="http://css.huangwx.cn/js/sweetalert-dev.js"></script>
</head>

<body>
  <div class="container">
    <div class="forms-container">
      <div class="signin-signup">
        <form action="#" class="sign-in-form">
          <h2 class="title">登录</h2>
          <div class="input-field">
            <i class="fas fa-user"></i>
            <input type="text" placeholder="用户名" name="username" />
          </div>
          <div class="input-field">
            <i class="fas fa-lock"></i>
            <input type="password" placeholder="密码" name="password" id="password-input" />
            <span id="show-password-toggle"><i class="far fa-eye"></i></span>
          </div>

          <input type="submit" value="立即登录" class="btn solid" />
          <p class="social-text">通过其他方式</p>
          <div class="social-media">
            <a href="#" class="social-icon">
              <i class="fab fa-qq"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-weixin"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-alipay"></i>
            </a>
          </div>
        </form>
        <form action="#" class="sign-up-form">
          <h2 class="title">注册</h2>
          <div class="input-field">
            <i class="fas fa-user"></i>
            <input type="text" placeholder="用户名" name="username" />
          </div>
          <div class="input-field">
            <i class="fas fa-lock"></i>
            <input type="password" placeholder="密码" name="password" />
          </div>
          <input type="submit" class="btn solid2" value="立即注册" />
          <p class="social-text">通过其他方式</p>
          <div class="social-media">
            <a href="#" class="social-icon">
              <i class="fab fa-qq"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-weixin"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-alipay"></i>
            </a>
          </div>
        </form>
      </div>
    </div>

    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>欢迎加入我们</h3>
          <h6>
            欢迎加入<span>w</span>的大家庭
          </h6>
          <button class="btn transparent" id="sign-up-btn">
            去注册
          </button>
        </div>
        <img src="./img/沟通.svg" class="image" alt="" />
      </div>
      <div class="panel right-panel">
        <div class="content">
          <h3>已有帐号？</h3>
          <p>
            立即登录已有帐号，享受独家权益。
          </p>
          <button class="btn transparent" id="sign-in-btn">
            去登录
          </button>
        </div>
        <img src="./img/讨论.svg" class="image" alt="" />
      </div>
    </div>
  </div>

  <script src="app.js"></script>
</body>

</html>